<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Vue示例</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/vue/3.2.40/vue.global.js"></script>
</head>

<body>
    <div id="app">
        {{msg.split('').reverse().join()}}
        <p>v-html: <span v-html="myHtml"></span></p>
        <p>v-html: <span v-text="myHtml"></span></p>
        <!-- v-bind是单向数据绑定,数据只能从data流向页面 -->
        <div :style="myS">abc</div>
        <!-- v-model是双向数据绑定 -->
        <input type="text" v-model.lazy="msg">
        <p>hello {{msg}}</p>
        <input type="text" v-model.number.trim="count">
    </div>
    <script>
        const app = Vue.createApp({
            setup(props) {
                let person = Vue.ref([
                    { id: 001, name: 'jack', age: 18 },
                    { id: 002, name: 'tom', age: 20 },
                    { id: 003, name: 'mary', age: 28 },
                ])
                let msg = Vue.ref('abcd');

                let count = Vue.ref(0);
                let url = Vue.ref('https://cn.vuejs.org/');
                let myS = Vue.ref('background-color: aqua;');

                const myHtml = Vue.ref('<div>html文本<span>123123</span></div>')
                function add() {
                    console.log(count.value);
                    count.value++
                };
                return {
                    person, count, add, url, myHtml, myS, msg
                }
            }
        }).mount("#app");
    </script>
</body>

</html>